<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>审批</title>

    <link href="css/style.css" rel="stylesheet" type="text/css">
    <!-- weUi -->
    <link rel="stylesheet" href="css/lib/weUi/weui.min.css">
    <link rel="stylesheet" href="css/lib/weUi/jquery-weui.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
    <script src="js/main.js"></script>
  </head>
  <body>
    <div class="approve-container" id="qj-wrap">
      <div class="bg-fff qj-borderRadius appr-padding qj-container">
        <span class="name qj-margin-0-10">姓名</span>
        <input style="width: 70%;" type="text" name="search-cnt" class="qj-input search-cnt" placeholder="请输入姓名...">
        <i class="search_icon" @click="search"></i>
      </div>
      <div class="bg-fff status-box qj-borderRadius appr-padding qj-container" id="status-box">
        <div class="sb">
          <span class="status qj-margin-0-10">状态</span>
          <div class="applying" style="float:right;">
            <span class="status time-color" id="qj-applying" style="font-size:.8rem;">
              <template v-if="status == 0"><span style="color:#2ba4f9;">申请中</span></template>
              <template v-else-if="status == 1"><span style="color:#2ab129;">通过</span></template>
              <template v-else><span style="color:#f44336;" >未通过</span></template>
            </span>
            <i class="down-ico"></i>
          </div>
        </div>
      </div>


      <div class="qjlist-box qj-container" v-for="item in result.datas">
        <div class="start-time time-box">
          <span>微信：</span>
          <span class="time-color" style="margin-right: 10px;">{{item.wxcode}}</span>
          <span>姓名：</span>
          <span class="time-color">{{item.name}}</span>
        </div>
        <div class="time-box">
          <span>电话：</span>
          <span class="time-color">{{item.mobile}}</span>
        </div>
        <div class="time-box">
          <span>请假开始时间：</span>
          <span class="time-color">{{item.startTime}}</span>
        </div>
        <div class="end-time time-box">
          <span>请假结束时间：</span>
          <span class="time-color">{{item.endTime}}</span>
        </div>
        <div class="apply-time time-box">
          <span>请假申请时间：</span>
          <span class="time-color">{{item.applyTime}}</span>
        </div>
        <div class="qj-reason time-box">
          <span>请假原因：</span>
          <span class="time-color">{{item.reason}}</span>
        </div>
        <div class="time-box">
          <span>状态：</span>
          <span class="time-color">
            <template v-if="item.status == 0"><span style="color:#2ba4f9;">申请中...</span></template>
            <template v-else-if="item.status == 1"><span style="color:#2ab129;">通过</span></template>
            <template v-else><span style="color:#f44336;" >未通过</span></template>

          </span>
          <template v-if="item.status == 0">
            <span class="shenhe" @click="shenhe(item.applyId)">审核</span>
          </template>

        </div>
        <div class="time-box">
          <span>领导意见：</span>
          <template v-if="!item.suggestion">
            <span class="time-color">---</span>
          </template>
          <template v-else>
            <span class="time-color">{{item.suggestion}}</span>
          </template>

        </div>
      </div>
<style>

  .showMsk{
    opacity: 0!important;
    visibility: hidden!important;
  }
</style>
      <!--BEGIN actionSheet-->
      <div>
          <div class="weui-mask" id="iosMask"></div>
          <div class="weui-actionsheet" id="iosActionsheet">
              <!-- <div class="weui-actionsheet__title">
                  <p class="weui-actionsheet__title-text">这是一个标题，可以为一行或者两行。</p>
              </div> -->
              <div class="weui-actionsheet__menu">
                  <div class="weui-actionsheet__cell" @click="hideActionSheet('1')">通过</div>
                  <div class="weui-actionsheet__cell" @click="hideActionSheet('0')">申请中</div>
                  <div class="weui-actionsheet__cell" @click="hideActionSheet('2')">未通过</div>
              </div>
              <div class="weui-actionsheet__action">
                  <div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
              </div>
          </div>
          <!--END actionSheet-->
    <!-- <div class="page__ft">
        <span>@中国***公司</span>
    </div> -->
      </div>

      <!--END actionSheet-->

      <!-- <div class="page__bd page__bd_spacing">
          <a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSActionSheet">iOS ActionSheet</a>
      </div> -->
      <script type="text/javascript">
          // ios
          $(function(){
              var $iosActionsheet = $('#iosActionsheet');
              var $iosMask = $('#iosMask');

              function hideActionSheet() {
                  $iosActionsheet.removeClass('weui-actionsheet_toggle');
                  $iosMask.fadeOut(200);
              }

              $iosMask.on('click', hideActionSheet);
              $('#iosActionsheetCancel').on('click', hideActionSheet);
              $("#status-box").on("click", function(){
                  $iosMask.css({'opacity': '1',visibility: 'visible'})
                  $iosActionsheet.addClass('weui-actionsheet_toggle');
                  $iosMask.fadeIn(200);
              });
          });

      </script>
    </div>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="js/lib/weUi/jquery-weui.min.js"></script>
  </body>

  <script type="text/javascript">
    var userId="ed95aeb8894d4d08810c734ee42ba575 ";  //当前登录用户的userId
    var type="0";  //查询他人的记录列表
    var v = new Vue({
      el:"#qj-wrap",
      data:{
        status:"",
        result:{}
      },
      created: function () {
       var s ="1";
       this.status=s;
       this.hideActionSheet(s);
      },
      methods:{
        http:function(reqData){
          if(!reqData.applyId){
            $.ajax({
                 url: "http://118.107.181.199:8088/prevention/app/leave/leaveList",
                 type: "POST",
                 data: JSON.stringify(reqData),
                 dataType:"json",
                 contentType:'application/json',
                 success: function (data) {
                    v.result = data;
                 },
                 error:function(e){
                   console.log("error");
                 }
             });
          }else{
            $.ajax({
               url: "http://118.107.181.199:8088/prevention/app/leave/leaveAuditing",
               type: "POST",
               data: JSON.stringify(reqData),
               dataType:"json",
               contentType:'application/json',
               success: function (data) {
                  if(data.status == "0"){
                      $.toast("操作成功");
                      v.hideActionSheet(reqData.status);
                  }else{
                    $.toast(data.error);
                  }
               },
               error:function(e){
                 $.toast("系统错误");
               }
           });

         }
      },
        search:function(){
          var searchCnt = $(".search-cnt").val();
          if(!searchCnt){
            $.toast("请输入查询内容");return
          }

          var reqData={
              "condition": searchCnt,
              "page": 0,
              "status": this.status,
              "type": type,
              "userId": userId
            }
          this.http(reqData);

        },
        hideActionSheet: function(status) {
          this.status=status;
          var $iosActionsheet = $('#iosActionsheet');
          var $iosMask = $('#iosMask');
          var reqData={
              "condition": "",
              "page": 0,
              "status": status,
              "type": type,
              "userId": userId
            }
            this.http(reqData);

            $iosActionsheet.removeClass('weui-actionsheet_toggle');
            $iosMask.fadeOut(200);
        },
        getList:function(event){
          console.log("水水");
        },
        shenhe:function(applyId,status){
          $.modal({
            title: "审核意见",
            text: "<textarea placeholder='请输入审核意见' id='shenhesugg' class='time-color' name='name' rows='4' cols=40'></textarea>",
            buttons: [
              {
                text: "同意",
                onClick: function(){
                  var sugg = $("#shenhesugg").val();
                  // if(!sugg){
                  //   $.alert("请输入审核意见");
                  // }else{
                  //   $.toast("操作成功");
                  // }
                  var reqData={
                    "applyId": applyId,
                    "status": "1",
                    "suggestion": sugg,
                    "userId": userId
                  }
                  v.http(reqData);
                }
              },
              { text: "不同意", onClick: function(){
                var sugg = $("#shenhesugg").val();
                var reqData={
                  "applyId": applyId,
                  "status": "2",
                  "suggestion": sugg,
                  "userId": userId
                }

                v.http(reqData);

              } },
              { text: "取消", className: "default", onClick: function(){ console.log(3)} },
            ]
          });
        }
      }
    });
  </script>
</html>
